<template>
  <div class="tabsBox">
    <div class="rightTime">
      <el-date-picker v-model="value1" @change="timeChange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <el-tabs v-model="bottomActiveName3" @tab-click="handleClick">
      <el-tab-pane label="产出统计" name="1">
        <right-one-echarts-line ref="rightOneEchartsLine" />
      </el-tab-pane>
      <!-- <el-tab-pane label="当日领用" name="2">
        <right-two-echarts-line ref="rightTwoEchartsLine" />
      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
import { timeFormatToString } from '@/utils/function'
import rightOneEchartsLine from './rightLine/rightOneEchartsLine'
import rightTwoEchartsLine from './rightLine/rightTwoEchartsLine'
export default {
  components: {
    rightOneEchartsLine,
    rightTwoEchartsLine
  },
  props: {},
  data() {
    return {
      bottomActiveName3: '1',
      interval: null,
      value1: '',
      searchobj: {
        beginSearchDay: '',
        endSearchDay: ''
      }
    }
  },
  watch: {},
  mounted() {
    // this.startAutoPlay()
  },
  beforeDestroy() {
    // this.stopAutoPlay()
  },
  methods: {
    timeChange($event) {
      this.searchobj.beginSearchDay = timeFormatToString($event[0]).slice(0, 10)
      this.searchobj.endSearchDay = timeFormatToString($event[1]).slice(0, 10)
      this.getEcharts()
    },
    async getEcharts() {
      this.$refs['rightOneEchartsLine'].getInfoEcharts(this.searchobj)
    },

    handleClick(tab, event) {
      setTimeout(() => {
        if (tab.name === '2') {
          this.$refs['rightTwoEchartsLine'].setMaterilCurrentApplyLine()
          this.$refs['rightTwoEchartsLine'].infoSize()
        } else {
          this.$refs['rightOneEchartsLine'].getInfoEcharts(this.searchobj)
          this.$refs['rightOneEchartsLine'].infoSize()
        }
      }, 500)
    }
  }
}
</script>
<style lang='scss' scoped>
.tabsBox {
  height: calc(100% - 45px);
  .rightTime {
    width: 225px;
    position: absolute;
    right: 10px;
    top: 18px;
  }
}
</style>
<style lang='scss'>
.bottomRightEcharts {
  position: relative;
  .el-tabs__header {
    position: absolute;
    top: 13px;
    width: 100px;
    left: 80px;
    margin: 0;
    .el-tabs__item {
      width: 50px;
      padding: 0 10px;
    }
    .is-active {
      color: #d9805e;
    }
  }
}
</style>
